Tech Talk

Getting to Know HTML
by Emily Wilska

In this issue: The basics, The tag, Text size, Text color, Text style, Line breaks & paragraphs, Learning more

Back in the early days of the Internet, things were pretty dull. Web pages didn't have sounds or images, color was hard to come by, and e-mail messages were strictly text. Thankfully, we've come a long way in the past 10 years or so, largely thanks to developments like HTML.

HTML, or Hyper Text Markup Language, is the basis of many Web pages. By using HTML, anyone who creates a Web page can add color, images and sounds, as well as different styles and sizes of text.

With MSN TV, you can use HTML to liven up both Web pages you create with Page Builder and e-mail messages you send. This month, we'll take a look at some HTML basics. Next month, we'll explore how to add even more excitement to your messages with images, background colors, and links, and we'll put all of this together to create an e-mail birthday card. (Remember, you can use HTML on any Web page you create, too.)

The basics
The building blocks of HTML are called tags. Tags tell browsers and e-mail programs how to display Web pages and e-mail messages — what kind of text to use, what the background color should be, where images appear, and so on. Most tags in HTML are two-parters: there's an opening tag, such as , and a closing tag, like . The opening tag tells the browser or mail program to start showing something, while the closing tag is the signal to stop showing it. Think of them as green lights and red lights; in order for things to flow smoothly, it's important to have both.

To start creating a page or message using HTML, type this tag: <html>. It should go at the top of the page, before anything else. When you're done with the page or message, type </html>, the red light indicating that there's no more HTML to follow.

For now, we'll focus on tags related to text: font size, color, style, and line and paragraph breaks.

€ Back to top

The tag
The tag is one of the most important, since it provides info on the style, size and color of the text. Within or following the font tag, you can list several different attributes, or specifications on what you want your text to look like.

As you'll see below, some of these attributes need to be included within the tag, while others stand alone as separate tags. Let's look at text size first.

€ Back to top

Text size
You can specify how large or small you'd like your text to be by using numbers. A size 1 font will be tiny, while a size 7 will be pretty large. On most browsers and mail programs, 7 is the largest font possible.

To specify a font size, type , replacing x with the size you'd like. Here are a few examples:

Here's some pretty small text.
Here's some medium text.
Here's some large text.

Note that you don't need to use a closing tag for size, but you do need one for .

€ Back to top

Text color
To specify text color, you'll use what's called an RGBhex number, which is a combination of six numbers and/or letters. Each color has its own RGBhex number. As with text size, you need to specify text color within the tag. Here are a few examples:

Here's some blue text.
Here's some green text.
Here's some red text.

Note that the RGBhex number for each color must be placed inside quotation marks. Also, as with text size, you don't need a closing tag for color, but you do need one for . Finally, unless you've got an amazing memory (and lots of time to spare), you probably won't want to memorize the code for each color. Instead, try using an HTML color chart; here's one to get you started: http://www.eskimo.com/~bloo/indexdot/color/x11alpha.htm

€ Back to top

Text style
There are three main text styles: bold, italic and underlined. (The style will be plain if you don't specify anything else.) Unlike text size and color, which need to be specified within the tag, text styles have their own separate tags, and they need both opening and closing tags. Here's what they look like:

Here's some bold text.
Here's some italicized text.
Here's some underlined text.

You can combine text styles by using what are called nested tags. To nest tags, use an opening tag for each style you want, type your text, and then use a closing tag for each style. It's best to close your tags in the opposite order you opened them — think last one in, first one out. Here's an example:

Here's some bold, underlined text.

€ Back to top

Line breaks and paragraphs
On Web pages or e-mail messages created with HTML, text will flow together in one long chunk unless you indicate where you'd like line breaks or new paragraphs to appear. The tags for these are quick and painless: use for a line break (like a carriage return in typing) and for a new paragraph. Both of these tags are loners: they don't need closing tags. Here's how they work:

Here's my first line of text. I'm ready for a new line. 
Here's my second line. Time for a new paragraph.

Here's my final line.

Note that when you use the tag, you don't need to use the tag. However, you can combine the two — — for extra space between two lines of text.

€ Back to top

Learning more
Next month, we'll look at adding images, background colors and links, and you'll get the chance to show off your skills by creating an e-mail card. If you're curious to learn more in the meantime, check out these sites:'

WC3's HTML basics: http://www.w3.org/MarkUp/Guide/
Guide to HTML for WebTV E-mail: http://www.geocities.com/ResearchTriangle/8795/howto.webtv.html

Finally, many of your fellow MSN TV users are HTML whizzes, so you may want to look for newsgroups devoted to using HTML on MSN TV, where you're sure to find lots of helpful information.

Have fun and stay tuned for next month's HTML lesson!

€ Back to top